<template>
  <div class="profile">
    <van-cell-group>
      <van-field v-model="username" disabled label="用户名" placeholder="请输入用户名" />
      <van-field v-model="name" disabled label="姓名" placeholder="请输入姓名" />
      <van-field v-model="master" disabled label="师傅代号" placeholder="请输入师傅代号" />
    </van-cell-group>
    <div style="margin:10px 0;">
      <van-field v-model="sex" disabled label="性别" placeholder="请输入性别" />
    </div>
    <van-cell-group>
      <van-field v-model="borndate" disabled label="出生日期" placeholder="请输入出生日期" />
      <van-field v-model="job" disabled label="职业" placeholder="请输入职业" />
      <van-field v-model="phone" disabled label="手机号" placeholder="请输入手机号" />
      <van-field v-model="wwnum" disabled label="淘宝会员名" placeholder="请输入淘宝会员名" />
    </van-cell-group>
    <div style="margin-top:10px;">
      <van-field v-model="zfbnum" disabled label="支付宝" placeholder="请输入支付宝" />
    </div>
    <van-button type="info" block style="margin-top:20px;" @click="onALI">修改支付宝账号</van-button>
    <van-button type="info" block style="margin-top:20px;" @click="onReset">修改操作密码</van-button>
    <van-dialog v-model="isshow" title="手机验证" :show-cancel-button="false" @confirm="onConfirm" @cancel="isshow = false">
      <van-field v-model="userphone" type="tel" label="手机号" placeholder="请输入手机号"/>
      <van-field v-model="usersms" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <van-button slot="button" size="small" type="info" :disabled="disabled" @click="onMessageSeract">{{btnTitle}}</van-button>
      </van-field>
      <van-field v-model="password" type="tel" label="登录密码" placeholder="请输入新的登录密码..."/>
    </van-dialog>
    <van-dialog v-model="ALIplay" title="提交资料" show-cancel-button @confirm="resetAliInfos">
      <van-field v-model="userphoneali" type="tel" label="手机号" placeholder="请输入手机号"/>
      <van-field v-model="usersmsali" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <van-button slot="button" size="small" type="info" :disabled="disabledali" @click="onMessage">{{btnTitle}}</van-button>
      </van-field>
      <van-field v-model="aliplay" type="tel" label="支付宝账号" placeholder="请输入支付宝账号"/>
    </van-dialog>
  </div>
</template>

<script>
import {sendcode, resetpaw, resetAliInfo} from '../api/api';
import aestool from '@/utils/aestool.js';
export default {
  data(){
    return{
      username:'boluo123',
      name:'ceshi',
      master:'g10005',
      sex:'女',
      ALIplay:false,
      userphoneali:"",
      usersmsali:"",
      aliplay:"",
      disabledali:false,
      borndate:'1993-09-23',
      job:'自由职业',
      phone:'13892039999',
      wwnum:'ceshi123',
      zfbnum:'13892039999',
      userinfodata:{},
      isshow:false,
      userphone:'',
      usersms:'',
      btnTitle:"获取验证码",
      disabled:false,
      password:'',
    }
  },
  created(){
    if(sessionStorage.getItem('useinfo')){
      this.userinfodata = JSON.parse(sessionStorage.getItem('useinfo'))
    }
    // this.onReset()OldphoneResetAli
  },
  mounted(){
      this.username = this.userinfodata.wx_name
      this.name = this.userinfodata.t_name
      this.master = this.userinfodata.teacher
      this.sex = this.userinfodata.sex == 2 ? '女' : '男'
      this.borndate = this.userinfodata.birth
      this.job = this.userinfodata.job
      this.phone = this.userinfodata.phone
      this.wwnum = this.userinfodata.taobao_name
      this.zfbnum = this.userinfodata.alpay
  },
  methods:{
    onALI(){
      this.ALIplay = true
      this.usersmsali = ''
      this.userphoneali = ''
      this.aliplay = ''
    },
    resetAliInfos(){
      let params = {
        code:aestool.encrypt(this.usersmsali,"OldphoneResetAli"),
        phone:aestool.encrypt(this.userphoneali,"OldphoneResetAli"),
        new_ali:aestool.encrypt(this.aliplay,"OldphoneResetAli")
      }
      resetAliInfo(params).then((res)=>{
        console.log(res);
        if(res.Status == 200){
          this.ALIplay = false
          this.$toast(res.Message)
        }else{
          this.$toast(res.Message)
        }
      })
    },
    //重置
    onReset(){
      this.isshow = true
      this.userphone = ''
      this.usersms = ''
      this.password = ''
    },
    //确认重置操作密码
    onConfirm(){
      if(this.userphone == ''){
        this.$toast("手机号码不能为空")
      }else if(this.usersms == ''){
        this.$toast("手机验证码不能为空")
      }else if(this.password == ''){
        this.$toast("登录密码不能为空")
      }else{
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        let params = {
          phone:aestool.encrypt(this.userphone,'OldphoneResetPaw'),
          code:aestool.encrypt(this.usersms,'OldphoneResetPaw'),
          new_paw:aestool.encrypt(this.password,'OldphoneResetPaw'),
        }
        resetpaw(params).then(res=>{
          if(res.Status == 200){
            toastload.clear()
            setTimeout(()=>{
              this.$toast(res.Message)
            },1500)
             this.$router.push('/Login')
          }
        })
      }
    },
    //发送验证码
    onMessageSeract(){
      //判断输入的手机号是否合法
      if(!this.userphone) {
        this.$toast("手机号码不能为空")
      } else if(!/^1[3456789]\d{9}$/.test(this.userphone)) {
        this.$toast("请输入正确是手机号")
      }else{
        //倒计时
        let time = 60;
        let timer = setInterval(() => {
          if(time == 0) {
            clearInterval(timer);
            this.disabled = false;
            this.btnTitle = "获取验证码";
          } else {
            this.btnTitle =time + '秒后重试';
            this.disabled = true;
            time--
          }
        },1000)
        let params = {
          phone:aestool.encrypt(this.userphone,'123456asdzxcqwe0')
        }
        sendcode(params).then(res=>{
          console.log('验证码',res)
          if(res.Status == 200){
            this.$toast('发送成功！')
          }else{
            this.$toast(res.Message)
          }
        })
      }
    },
    //发送验证码
    onMessage(){
      //判断输入的手机号是否合法
      if(!this.userphoneali) {
        this.$toast("手机号码不能为空")
      } else if(!/^1[3456789]\d{9}$/.test(this.userphoneali)) {
        this.$toast("请输入正确是手机号")
      }else{
        //倒计时
        let time = 60;
        let timer = setInterval(() => {
          if(time == 0) {
            clearInterval(timer);
            this.disabled = false;
            this.btnTitle = "获取验证码";
          } else {
            this.btnTitle =time + '秒后重试';
            this.disabled = true;
            time--
          }
        },1000)
        let params = {
          phone:aestool.encrypt(this.userphoneali,'123456asdzxcqwe0')
        }
        sendcode(params).then(res=>{
          console.log('验证码',res)
          if(res.Status == 200){
            this.$toast('发送成功！')
          }else{
            this.$toast(res.Message)
          }
        })
      }
    },
  }
}
</script>
<style lang="stylus" scoped>
.profile{
  padding 10px 16px
  background #f8f8f8
  height 100%
}
</style>


